React Native

Performance

パッケージの管理も gradle にやってもらう感じな雰囲気を感じている

高さの決まり方

画面サイズが基準

絶対値と割合と Flexbox で配置

Flex

A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.

Flex のデフォルトの値は Flex の欄を参照

Flex

デフォルト値

Flex

flex: <positive number> equates to flexGrow: <positive number>, flexShrink: 1, flexBasis: 0

Flexgrow = 0

FlexShrink = 0

FlexBasic = 要素のサイズ

ScrollView と flex について

ScrollView はその中の要素分の高さをもってしまうと思われる

外側の要素で高さを指定しない限り、画面全体に広がる

Flexbox に納めようとすると、、、

ScrollVIew 自体に flexgrow とかしてしまうと、画面全体に広がる

兄弟要素が flexGrow 1 をもっていても

おそらく、Flex の割り当てを決める時点でサイズが大きすぎているので、Flex で割り当てる場所はなくなってしまう

したがって、flexbasis: 0 と明示するか、flex: 1 を指定して、Flexbox 内部の割り当てを決めるときの scrollview のサイズを 0 にしておく必要があるのだと思う

知らんけど

readings

Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes quick to debug.

これの意味は

親をたどって最初に見つかる高さが ScrollView の高さになる

そのため、ScrollView が入っている Flexbox に別の兄弟要素がある場合は、???